<template>
  <div class="service-container">
    <!-- 导航栏 -->
    <van-nav-bar left-text="找家政服务" class="page-nav-bar" left-arrow @click-left="$router.back()" />

    <div class="banner">
      <van-cell class="title"><h2>找家政</h2></van-cell>
      <van-form ref="serviceForm">
        <toggle-tag :showTitle="'需求岗位'" :tag-list="Company.occupation" :tag-data="formData.demand" @pushTag="pushTag" @spliceTag="spliceTag" />
        <van-field v-model="formData.mobile" :rules="rules.mobile" name="mobile" label="手机号码" placeholder="请填写手机号码" />
        <van-field v-model="formData.age" name="age" label="年龄" placeholder="请填写年龄" />
        <van-field v-model="formData.salary" name="salary" label="薪资" placeholder="请填写薪资" />
        <van-cell title="住家" class="tag">
          <van-tag :class="formData.home === '住家' ? 'skin' : ''" plain round size="large" @click="toggle('住家')">住家</van-tag>
          <van-tag :class="formData.home === '不住家' ? 'skin' : ''" plain round size="large" @click="toggle('不住家')">不住家</van-tag>
        </van-cell>
        <van-field v-model="formData.contacts" name="contacts" label="联系人" placeholder="请填写联系人" />
        <van-field v-model="formData.requirement" name="requirement" label="籍贯要求" placeholder="请填写籍贯要求" />
        <van-field v-model="formData.work" name="work" label="工作地点" placeholder="请填写工作地点" />
        <van-button block type="info" class="btn" @click="submit">提交资料</van-button>
      </van-form>
    </div>
  </div>
</template>

<script>
import Company from '@/api/constant/company'
import { validEmptyString } from '@/utils/config'

export default {
  name: 'Service',
  data () {
    return {
      Company,
      formData: {
        mobile: '',
        age: '',
        salary: '',
        address: '',
        contacts: '',
        requirement: '',
        work: '',
        demand: [],
        home: '住家'
      },
      rules: {
        mobile: [
          { required: true, message: '请填写手机号码' },
          { pattern: /^1[3-9]\d{9}$/, message: '手机号码格式不正确' }
        ]
      }
    }
  },
  created () {},
  mounted () {},
  methods: {
    async submit () {
      try {
        validEmptyString(this.formData)
        await this.$refs.serviceForm.validate()
        this.$toast.loading({
          message: '提交中...', // 展示时的提示信息
          forbidClick: true, // 展示时, 静止点击背景
          duration: 0 // toast 展示时间 默认为2秒, 0 表示持续展示
        })
        console.log(this.formData)
        this.$toast.success('提交资料成功')
        this.$router.back()
      } catch (error) {
        console.log(error)
      }
    },
    toggle (val) {
      this.formData.home = val
    },
    pushTag (item) {
      this.formData.demand.push(item.name)
    },
    spliceTag (index, value) {
      this.formData.demand.splice(index, value)
    }
  }
}
</script>

<style scoped lang="less">
@import '~@/styles/from.less';
.service-container {
  .skin {
    color: #3296fa !important;
  }
  .tag {
    .van-tag {
      margin: 0 15px;
    }
  }
}
</style>
